问题：当vue项目发布后，在浏览器第一次打开访问vue项目地址，导致第一次打开页面时间太慢，好久都没打开，一直在加载

借鉴博客：https://www.cnblogs.com/zyulike/p/11190012.html

解决办法：

4、使用compression-webpack-plugin插件，修改配置文件，production环境下对超过10k的文件进行压缩，nginx部署时开启gzip

　　1.1、没去.map文件之前，打包后的js目录：有两个很大的.map文件

　　1.2、在vue.config.js文件中配置代码：

　　1.3、打包后的结果：两个比较大的.map文件不存在了

　　vue-router路由懒加载就是访问其他页面的时候才加载，进入当前页面其他页面先不加载，可以减少耗时。

懒加载路由配置：

非懒加载路由配置：

　　具体操作：

　　　　第一步：修改vue.config.js配置

或：如上面那种报错不起作用，试试另一种写法配置：

　　　　第二步：找到项目的public文件夹的/index.html中引入CDN

　　如果报错提示：element未定义，解决办法：vue.js需要在element-ui之前引入，所以vue.js也要改为CDN的引入方式

　　要删除原先在js中的import引入，不删除的话，项目还是会从node_modules中引入资源文件

借鉴博客：https://blog.csdn.net/qq_31677507/article/details/102742196   （比较有用）

借鉴博客：https://blog.csdn.net/qq_37600506/article/details/111835555

借鉴博客：https://blog.csdn.net/weixin_46190955/article/details/116496108?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&utm_relevant_index=1

 　　4.1、vue项目安装compression-webpack-plugin插件

　　最新的compression-webpack-plugin插件运行起来可能会报错，找不到什么乱七八糟的属性：

　　　　解决办法：把此插件的版本降低

安装5.0.1版本 npm i [email protected]

　　因为使用的是jenkins自动打包，打包的时候报错没有找到compression-webpack-plugin，所以在项目的package.json配置文件里手动指定一下版本：

 　　4.2、还要在vue.config.js文件中配置一下compression-webpack-plugin，内容如下：

const webpack = require('webpack')const CompressionWebpackPlugin = require('compression-webpack-plugin')const productionGzipExtensions = ['js', 'css']const isProduction = process.env.NODE_ENV === 'production'

module.exports = { productionSourceMap: false, //去除vue打包后js目录下生成的.map文件，用于加速生产环境构建

configureWebpack:{ resolve:{ alias:{ '@':path.resolve(__dirname, './src'), '@i':path.resolve(__dirname, './src/assets'), } }, plugins: [ new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

// 下面是下载的插件的配置 new CompressionWebpackPlugin({ algorithm: 'gzip', test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold: 10240, minRatio: 0.8 }), new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 5, minChunkSize: 100 }) ] },

　　　4.3、最后nginx开启gzip压缩，nginx的default.conf配置文件加入gzip配置内容如下：上面的借鉴博客中的gzip配置有问题，我自己又在网上找了一个，最后打包测试成功

最后优化成功，浏览器删除历史记录后，第一次访问vue项目只花了1.7秒：谷歌浏览器

 IE浏览器：

。